<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-29 11:23:07
 * @LastEditTime: 2023-06-28 15:21:25
-->
<script setup lang="ts" name="NewFormModal">
import {
  CirclePlusFilled,
  DocumentCopy,
  Operation
} from '@element-plus/icons-vue'
import { EFlowFormType } from '@main/views/approve-workflow/enum'

const props = defineProps({
  formVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:formVisible', 'create'])
const _visible = ref(props.formVisible)
watchEffect(() => {
  _visible.value = props.formVisible
})

const ICON_SIZE = 20
const FormType = EFlowFormType
const handCreate = (type: string) => {
  if (type === FormType.已有模板)
    return
  emit('create', type)
}
</script>

<template>
  <el-dialog
    v-model="_visible"
    title="创建表单"
    width="450px"
    draggable
    @close="$emit('update:formVisible', false)"
  >
    <div class="flex flex-col items-center">
      <span class="long-btn" @click="handCreate(FormType.已有表单)">
        <el-icon :size="ICON_SIZE">
          <Operation />
        </el-icon>
        已有表单，仅配置流程
      </span>
      <span class="long-btn" @click="handCreate(FormType.流程表单)">
        <el-icon :size="ICON_SIZE">
          <CirclePlusFilled />
        </el-icon>
        创建流程表单
      </span>
      <span class="long-btn disabled" @click="handCreate(FormType.已有模板)">
        <el-icon :size="ICON_SIZE">
          <DocumentCopy />
        </el-icon>
        复制已有模板
      </span>
    </div>
    <template #footer> </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.long-btn {
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  margin: 8px;
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  border-radius: var(--base-radius);
  cursor: pointer;
  transition: all 0.25s ease-in-out;

  &.disabled{
    cursor: not-allowed;
    color: var(--el-disabled-text-color);
    border: 1px solid var(--el-disabled-text-color);
    background-color: var(--el-disabled-bg-color) !important;
  }

  &:not(.disabled):hover {
    background-color: var(--el-color-primary);
    color: #fff;
  }

  i {
    margin-right: 5px;
  }
}
</style>
